three. js Quick Start [Recommended]

The core five steps of Three. js are:

1. Set up the three. js renderer

2. Set Camera camera

3. Set up scenario scene

4. Set the light source light

5. Set the object object

1. Set up the three. js renderer

The process of mapping objects in 3D space to 2D plane is called 3D rendering. Generally speaking, we all call the software for rendering operation a renderer. Specifically, the following processes should be performed.

var renderer;
function initThree(){
 width = document.getElementById("box").clientWidth;
 height = document.getElementById("box").clientHeight;
 /**
 // Declare a renderer object: WebGLRenderer 
 renderer=new THREE.WebGLRenderer({ 
  antialias:true, // Whether to turn on anti-aliasing  
  precision:"highp", // Selection of coloring accuracy  
  alpha:true,  // Can I set background color transparency  
  premultipliedAlpha:false, 
  stencil:false, 
  preserveDrawingBuffer:true, // Do you want to save the drawing buffer  
  maxLights:1  //maxLights: Maximum number of lights  
 }); 
 */
 renderer = new THREE.WebGLRenderer({
 antialias:true
 });/* Generate renderer object (property: anti-aliasing effect is set to be effective) */
 renderer.setSize(width,height);
 document.getElementById("box").appendChild(renderer.domElement);
 /* Settings canvas Background color (clearColor) And background color transparency ( clearAlpha )  */
 renderer.setClearColor(0xFFFFFF,1.0);
}

2. Set Camera camera

In OpenGL (WebGL), there are two kinds of cameras: perspective projection and orthographic projection.

a. Perspective projection: The closer the object is from the viewpoint, the larger it is, and the smaller it is to draw the distant object, which is the same as the way we look at the object in our daily life.

b. Orthographic projection: No matter the distance between objects and viewpoints, they are drawn according to the size of Unification 1. In the fields of architecture and design, objects need to be drawn from various angles, so this projection is widely used. In Three. js, you can also specify perspective projection and orthographic projection cameras. This article sets the perspective projection mode according to the following steps.

(1) Declare global variables (objects);

(2) Set up a camera for perspective projection;

(3) Setting the position coordinates of the camera;

(4) Set the upper part of the camera to the axis direction of "z";

(5) Set the center coordinates of the visual field.

var camera;
function initCamera(){
 /*PerspectiveCamera Adj. 4 Parameters 
  Parameter 1 Angle of view  ,
  Parameter 2 Aspect ratio. This parameter almost always uses the width of the element divided by the height, otherwise you will see something like the old movie , The image is squashed .
  Parameter 3 : The closest distance the camera is allowed to an object .
  Parameter 4 ; The maximum distance allowed by the camera from the object . By default , The upward direction of the camera is Y Shaft , The right direction is X Shaft , Inward for Z Shaft .*/
 camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
 camera.position.x = 0;
 camera.position.y = 1000;
 camera.position.z = 0;
 camera.up.x = 0;
 camera.up.y = 0;
 camera.up.z = 1;
 camera.lookAt({x:0,y:0,z:0}); // Set the center coordinates of the field of view  
}

STEP 3 Set up Scenarios

var scene;
function initScene(){
 scene = new THREE.Scene();
}

4. Set the light source light

In the 3D space of OpenGL (WebGL), there are two types of point light source and spotlight. Moreover, as a special case of point light source, there is a parallel light source (wireless far light source). In addition, as the parameters of the light source, [ambient light] and the like can be set. As a correspondence, [point light source (Point Light)] [spotlight (Spot Light)] [parallel light source (Direction Light)] and [ambient light (Ambient Light)] may be provided in Three. js. Like OpenGL1, multiple light sources can be set in one scene. Basically, it is a combination of ambient light and several other light sources. If ambient light is not set, the surface that cannot be illuminated by light will become too dark. In this article, we first set up parallel light sources according to the following steps, and then add ambient light.

(1) Declare global variables (objects)

(2) Set up parallel light source

(3) Set the light source vector

(4) Add light source to scene

/*** Illumination (light) ***/
new THREE. AmbientLight (color); //Ambient light
new THREE. PointLight (color, intensity, distance); //Point light source
new THREE. DirectionalLight (color, brightness); //Parallel light
new THREE. SpotLight (color, intensity, distance, included angle, attenuation index); //Spotlight

var light;
function initLight(){
 light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); // Parallel light 
 light.position.set(100, 100, 200); // Set the light source position 
 scene.add(light); // Add officials to the scene 
}

STEP 5 Set Objects

//Geometry
CubeGeometry (Length, Width, Height, Length Segmentation, Width Segmentation, Height Segmentation); //Cube
PlanGeometry (long, wide, long division, wide division); //plane
SphereGeometry (radius, longitude slice, latitude split, longitude split, longitude cross, latitude start, latitude cross); //Sphere
CircleGeometry (radius, slice number, starting, crossing angle); //Round
CylinderGeometry (Top Area, Bottom Area, Height, Circle Segmentation, High Segmentation, No Top and Bottom); //Dome
TetrahedronGeometry (radius, detail); //Regular quadrangle
OctahedronGeometry (radius, detail); //Regular 8-sided
IconsahedronGeometry (radius, detail); //Regular 102-sided
TorusGeometry (radius, pipe radius, latitude division, longitude division, radian of torus); //Torus

var sphere;
function initObject(){
 sphere = new THREE.Mesh(new THREE.SphereGeometry(200,200)/* Set the size of the sphere */,new THREE.MeshLambertMaterial({color:0xff0000})/* Set the material of the sphere */); // Material setting  
 scene.add(sphere); 
 sphere.position.set(0,0,0); /* Set the object position */
} 

6. Implementation

function threeExcute(){ 
 initThree(); 
 initCamera(); 
 initScene(); 
 initLight(); 
 initObject(); 
 renderer.clear(); 
 renderer.render(scene,camera); 
}

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://cdn.bootcss.com/three.js/r83/three.min.js"></script>
</head>
 <!-- Three.js The core of 5 The steps are: 
 1. Settings three.js Renderer 
 2. Set up the camera camera
 3. Setting Scenarios scene
 4. Set the light source light
 5. Set objects object 
 -->
 <script>
 // 1. Settings three.js Renderer 
 var renderer;
 function initThree(){
 width = document.getElementById("box").clientWidth;
 height = document.getElementById("box").clientHeight;
 renderer = new THREE.WebGLRenderer({
 antialias:true
 });/* Generate renderer object (property: anti-aliasing effect is set to be effective) */
 renderer.setSize(width,height);
 document.getElementById("box").appendChild(renderer.domElement);
 /* Settings canvas Background color (clearColor) And background color transparency ( clearAlpha )  */
 renderer.setClearColor(0xFFFFFF,1.0);
 }
 // 2. Set up the camera camera
 var camera;
 function initCamera(){
 camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
 camera.position.x = 0;
 camera.position.y = 1000;
 camera.position.z = 0;
 camera.up.x = 0;
 camera.up.y = 0;
 camera.up.z = 1;
 camera.lookAt({x:0,y:0,z:0}); // Set the center coordinates of the field of view  
 }
 // 3. Setting Scenarios 
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 // 4. Set the light source light
 var light;
 function initLight(){
 light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); // Parallel light 
 light.position.set(100, 100, 200); // Set the light source position 
 scene.add(light); // Add officials to the scene 
 }
 //5. Set objects  
 var sphere;
 function initObject(){
 sphere = new THREE.Mesh(new THREE.SphereGeometry(200,200)/* Set the size of the sphere */,new THREE.MeshLambertMaterial({color:0xff0000})/* Set the material of the sphere */); // Material setting  
  scene.add(sphere); 
  sphere.position.set(0,0,0); /* Set the object position */
 } 
 //6. Execute  
 function threeExcute(){ 
  initThree(); 
  initCamera(); 
  initScene(); 
  initLight(); 
  initObject(); 
  renderer.clear(); 
  renderer.render(scene,camera); 
 } 
 </script>
 <style type="text/css">
 div#box{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
  }
 </style>
 <body onload="threeExcute();">
 <div id="box"></div>
 </body>
</html>

three.js Download address: http://www.bootcdn.cn/three.js/